<template>
  <div class="pagelist-wrapper">
    <guode-search v-if="config.searchs" :form="data" :option="config.searchs" @search="handleUpdateTable" :hideButton="hideButton" :span="8"></guode-search>
    <guode-table :data="data.data" :columnDefault="configDefault.columns" :columns="config.columns" border>
      <template v-for="(column, index) in config.columns ? config.columns.filter(it => it.slotName) : []" v-slot:[column.slotName]="slotProps">
        <div :key="index">
          <slot :name="column.slotName" :row="slotProps.row" :column="column" />
        </div>
      </template>
    </guode-table>
    <guode-pagination v-if="isPagination" :pageInfo="data.pageInfo" :background="background" :layout="paginationLayout" align="left" @updateTable="handleUpdateTable()" />
  </div>
</template>
<script>
import GuodeTable from '../../table/src/table.vue'
import GuodePagination from '../../pagination/src/pagination.vue'
import GuodeSearch from '../../search/src/search.vue'

const COMPONENT_NAME = 'guodePagelist'
export default {
  name: COMPONENT_NAME,
  components: { GuodeTable, GuodePagination, GuodeSearch },
  props: {
    data: {
      type: Object,
      default: () => {
        return { data: [], pageInfo: { page: 1, pageSize: 30, totalCount: 0 } }
      },
    },
    config: Object,
    configDefault: {
      type: Object,
      default: () => {
        return {
          columns: { align: 'left', headerAlign: 'center', showOverflowTooltip: true, minWidth: '100px' },
        }
      },
    },
    isPagination: {
      type: Boolean,
      default: true,
    },
    hideButton: Boolean,
    background: Boolean,
    paginationLayout: {
      type: String,
      default: 'full',
    },
  },
  methods: {
    handleUpdateTable() {
      this.$emit('search')
    },
  },
}
</script>

<style lang="scss">
.pagelist-wrapper {
}
</style>